<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="dialogFormVisible = true">用户添加</el-button>
    <!--    数据表格-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="名称"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.username }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="密码"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.password}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="真名"
        >
            <template slot-scope="scope">
                <span >{{scope.row.realName}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="头像"
        >
            <template slot-scope="scope">
                <img style="width: 100px;height: 100px" v-bind:src="scope.row.userImage">
            </template>
        </el-table-column>
        <el-table-column
                label="电话"
        >
            <template slot-scope="scope">
                <span >{{scope.row.userTel}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="userEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="userDelete(scope.$index,scope.row)">删除</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="showCheckboxDialog(scope.$index,scope.row)">角色设置</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog title="用户管理" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="user">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="user.username"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户真名" :label-width="formLabelWidth">
                <el-input v-model="user.realName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" :label-width="formLabelWidth">
                <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户图片" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img style="width: 100px;height: 100px" v-if="user.userImage" :src="user.userImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户电话" :label-width="formLabelWidth">
                <el-input v-model="user.userTel" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUser()">确 定</el-button>
        </div>
    </el-dialog>
<el-dialog title="用户角色管理" :visible.sync="dialogCheckboxVisible" @close="closeMyCheckBox">
    <el-checkbox-group
            ref="checkbox"
            v-model="checkRole" >
        <el-checkbox v-for="item in role"
                    :label="item.roleName"
                     :false-label="item.id"
                     :true-label="item.id"
                     @change="setRole"
                    >
        </el-checkbox>
    </el-checkbox-group>
</el-dialog>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app"
        ,data(){
            return{
                tableData:null,
                line:null,
                role:null,
                total:0,
                current:1,
                pageSize:10,
                dialogFormVisible:false,
                dialogCheckboxVisible:false,
                formLabelWidth:"120px",
                user:{
                    id:'',
                    username:'',
                    password:'',
                    realName:'',
                    userTel:'',
                    userImage:'',
                },
                checkRole:[],
                userId:'',
            }
        },methods:{
            loadPage(current)
            {
                this.current = current;
                axios.get("/user/" + current).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.pageSize;
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                this.user.userImage ="http://192.168.31.100/images/"+res.data;
            },
            setRole(value){
                   axios.post("/role/user/"+value+"/"+this.userId).then(value =>
                   {
                       if(value.data.code==1){
                           this.checkRole=value.data.data;
                   }
                   });
            },
           userEdit(index,row){
                //使用JSON.parse和JSON.stringify可以将数据以JSON形式赋给当前对象
                this.user=JSON.parse(JSON.stringify(row))
                this.dialogFormVisible=true;
            },
            userDelete(index,row){
                if (confirm("确定删除吗")){
                    axios.delete("/user/"+row.id).then(value => {
                        if (value.data.code==1){
                            this.loadPage(this.current);
                            this.$message(value.data.msg);
                        }
                    });
                }
            },
            saveUser(){
                if(this.user.id==''){
                    axios.post("/user",this.user).then(value => {
                        if(value.data.code == 1){
                            this.loadPage(this.current);
                            this.$message(value.data.msg);
                        }
                    });
                }else{
                    axios.put("/user",this.user).then(value => {
                        if(value.data.code==1){
                            this.loadPage(this.current)
                            this.$message(value.data.msg);
                        }
                    });
                }
                this.dialogFormVisible=false;
            },
            closeMyDialog(){
                this.user={   //关闭对话框时更改product属性
                    id:'',
                    username:'',
                    password:'',
                    realName:'',
                    userTel:'',
                    userImage:''
                }
            },
        showCheckboxDialog(index,row){
                // console.log(row);
                axios.get("/role/user/"+row.id).then(value=>{
                    if(value.data.code==1){
                        this.userId=value.data.msg;
                        this.checkRole=value.data.data;
                }
                });
                this.dialogCheckboxVisible = true;
        },closeMyCheckBox(){
            this.checkRole=[];
            this.userId='';
        }
        },
        mounted(){
            axios.get("/roles").then(value => {
                if(value.data.code == 1){
                this.role = value.data.data;
            }
        });
            this.loadPage(1);
        }
    })
</script>
</html>